<template>
  <div id="barController" style="width: 630px; height: 290px;"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as echarts from 'echarts';
import adminApi from "../../apis/admin";
const DrawEcharts = (data) => {
  var chartDom = document.getElementById('barController');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: '反馈解决情况',
      left: 'center', // 标题水平居中
      top: '10px' // 标题距离图表顶部的距离
    },
    xAxis: {
      type: 'category',
      data: ['未解决', '已解决', '反馈总数']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          formatter: '{c}', // 显示柱状图对应数据的值
          color: '#000000' // 标签文字颜色
        }
      }
    ]
  };

  option && myChart.setOption(option);
}
const GetAllFeedBackNumber = async () => {
  try {
    const res =await adminApi.getAllFeedBackData();
    console.log(res);
    DrawEcharts(res);
  } catch (error) {
    console.log(error);
  }
}
onMounted(async () => {
  await GetAllFeedBackNumber();
});
</script>

<style scoped>
</style>
